<template>
  <div>
    <ul class="box">
      <p>共{{ total }}条</p>--
      <p>每页{{pageSize}}条</p>
      <span @click="lft">&lt;</span>
      <li @click="changePage(i)" v-for="i in nums" :key="i"
        :class="{active:pagenum==i}"
      >{{ i }}</li>
      <span @click="rit">&gt;</span>
    </ul>
    <div>跳到 
        <input type="text" v-model="num" @keydown.13="gopage">页
    </div>
  </div>
</template>

<script>
export default {
  props: {
    //每页多少条
    pageSize: Number,
    //总共多少条
    total: Number,
  },
  data() {
      return {
          pagenum: 1,
          num:1
    };
  },
  methods: {
    changePage(i) {
          this.$emit("sizeChange", i);
      this.pagenum = i
      },
    //点击左箭头
      lft() {
          this.pagenum--
          if (this.pagenum < 1) {
              this.pagenum = 1
            this.$emit("sizeChange", this.pagenum);
        }
      },
    //点击右箭头
      rit() {
          this.pagenum++
          if (this.pagenum >this.nums) {
              this.pagenum = this.nums
            this.$emit("sizeChange", this.pagenum);
        }
      },
      gopage() {
          this.pagenum = this.num
        this.$emit("sizeChange", this.pagenum);
      }
  },
  created() {},
  mounted() {},
  components: {},
  computed: {
    nums() {
      return Math.ceil(this.total / this.pageSize);
    },
  },
  watch: {},
};
</script>

<style lang='scss' scoped>
.box {
  display: flex;
  li,span {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: 1px solid #eee;
    margin: 0 5px;
  }
}
.active{
    border: 1px solid green;
    background-color: #ccc;
    color: #fff;
}
</style>
